<template>
  <div>
    <el-dialog v-model="dialogTableVisible" title="修改单位信息" top="2vh">
      <el-form
        :model="companyInfo"
        :label-width="80"
        label-position="left"
        ref="companyInfo"
        :rules="rules"
      >
        <el-form-item label="公司名称" prop="companyName">
          <el-input
            v-model="companyInfo.companyName"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="公司地址" prop="companyAddress">
          <el-input
            type="text"
            v-model="companyInfo.companyAddress"
            placeholder="请输入公司地址"
          />
        </el-form-item>
        <el-form-item label="公司法人" prop="corporation">
          <el-input
            type="text"
            v-model="companyInfo.corporation"
            placeholder="请输入公司法人名称"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="phoneNum">
          <el-input
            type="text"
            v-model="companyInfo.phoneNum"
            placeholder="请输入公司联系电话"
          />
        </el-form-item>
        <el-form-item label="税号" prop="taxNumber">
          <el-input
            type="text"
            v-model="companyInfo.taxNumber"
            placeholder="请输入公司税号"
          />
        </el-form-item>
        <el-form-item label="开户行" prop="accountBank">
          <el-input
            type="text"
            v-model="companyInfo.accountBank"
            placeholder="请输入开户银行名称"
          />
        </el-form-item>
        <el-form-item label="卡号" prop="accountNum">
          <el-input
            type="text"
            v-model="companyInfo.accountNum"
            placeholder="请输入开户银行账号"
          />
        </el-form-item>

        <el-form-item label="添加附件" prop="file">
          <el-upload
            class="upload-demo"
            :before-remove="beforeRemove"
            :on-change="fileChangeFunc"
            drag
            action=""
            multiple
            name="file"
            style="float: left"
            :file-list="fileList"
            :auto-upload="false"
          >
            <el-icon class="el-icon--upload"><Document /></el-icon>
            <div class="el-upload__text">拖放文件上传 或 <em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">
                单个文件最大为50MB,总上传大小为100MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateFunc">修改</el-button>
          <el-button
            type="primary"
            @click="this.$refs.companyInfo.resetFields()"
            >重置</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import axios from "../../../utils/request";
import { Document } from "@element-plus/icons";
import { ElNotification } from "element-plus";
export default {
  components: { Document },
  inject: ["reload"],
  data() {
    return {
      dialogTableVisible: false,
      companyInfo: {},
      fileList: [],
      files: [],
      rules: {
        companyName: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        companyAddress: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        corporation: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        phoneNum: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        taxNumber: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
          { max: 20, message: "最大长度不超过20个字符", trigger: "blur" },
        ],
        accountBank: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
        accountNum: [
          { required: true, message: "该字段不允许为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getCompanyInfoDetail(id) {
      //   console.log(id);
      let self = this;
      axios.get("/CompanyInfos/detail", { params: { id, id } }).then((res) => {
        self.companyInfo = res.data.data.companyInfo;
        // console.log(res)
        for (
          var i = 0;
          i < res.data.data.companyInfo.files.length;
          i++
        ) {
          this.fileList.push({
            id: res.data.data.companyInfo.files[i].id,
            name: res.data.data.companyInfo.files[i].utilSrcName,
            isExcite: true, //服务器中是否存在
          });
        }
      });
    },
    showDialog(id) {
      this.dialogTableVisible = true;
      this.getCompanyInfoDetail(id);
    },
    // 表单文件上传函数
    beforeRemove(file, fileList) {
      console.log(fileList);
      // var re = this.$confirm(`确定将文件 ${file.name}从服务器中删除?`);
      if (file.isExcite === true) {
        axios
          .get("/UtilFiles/delete", { params: { id: file.id } })
          .then((res) => {
            ElNotification.success("文件" + res.data.message);
          });
      } else {
        //删除上传列表中数据
        this.files.splice(this.files.indexOf(file), 1);
      }
    },
    fileChangeFunc(file, fileList) {
      // console.log("file :",file);
      this.files.push(file);
      //   console.log("fileList:", fileList);
    },
    updateFunc() {
      this.$refs.companyInfo.validate((valid) => {
        if (valid) {
          var formData = new window.FormData();
          formData.append(
            "companyInfo",
            new Blob([JSON.stringify(this.companyInfo)], {
              type: "application/json",
            })
          );
          if (this.files.length != 0) {
            this.files.forEach((data) => {
              formData.append("files", data.raw);
            });
          }
          axios.post("/CompanyInfos/upData", formData).then((res) => {
            if (res.data.status === 200) {
              ElNotification({
                message: res.data.message,
                type: "success",
                duration: "1500"
              });
            }
            this.reload();
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>